<template>
  <el-drawer :title="title" size="900px" direction="rtl" :with-header="false" :closable="false" :visible="visible" @close="onClose">
    <div class="buttonList">
      <el-button type="primary" @click="savePhotoAndPrint">打印<i class="el-icon-printer el-icon--right" /></el-button>
    </div>
    <div id="screenViewBox">
      <table class="tg" style="undefined;table-layout: fixed; width: 100%;margin: 0 auto;">
        <tr>
          <td class="tg-koh6" colspan="4">任务单编号 {{ model.taskNum }}</td>
          <td class="tg-koh6" colspan="2" rowspan="2">
            <div id="qrCode">
              <vue-qr :text="qrModel.text" :size="200" :margin="0" color-dark="black" color-light="white" />
              <div v-if="qrModel.label !== ''" class="labelBox">
                {{ qrModel.label }}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="tg-1692" colspan="4">单据编号 {{ model.receiptNum }}</td>
        </tr>
        <tr>
          <td class="tg-7jts">料品品名</td>
          <td class="tg-7jts">{{ model.productName }}</td>
          <td class="tg-7jts">数量</td>
          <td class="tg-7jts">{{ model.quantity }}</td>
          <td class="tg-7jts">备料品名</td>
          <td class="tg-7jts">{{ model.stockName }}</td>
        </tr>
        <tr>
          <td class="tg-7jts">计划开工日期</td>
          <td class="tg-7jts">{{ model.startTime }}</td>
          <td class="tg-7jts">计划完工日期</td>
          <td class="tg-7jts">{{ model.endTime }}</td>
          <td class="tg-7jts">计划号</td>
          <td class="tg-7jts">{{ model.planNum }}</td>
        </tr>
        <tr>
          <td class="tg-7jts">备注</td>
          <td class="tg-7jts" colspan="5" />
        </tr>
        <!-- <tr>
            <td class="tg-7jts" colspan="6">
              <img
                :src="`${baseURL}/${model.picNum}/image`"
                width="600" height="450">
              </td>
          </tr> -->
        <tr v-for="(item, index) in list" :key="index">
          <td class="tg-7jts">工艺名称</td>
          <td class="tg-7jts">{{ item.techName }}</td>
          <td class="tg-7jts">备选设备</td>
          <td class="tg-7jts">{{ item.equipment }}</td>
          <td class="tg-7jts">工艺二维码</td>
          <td class="tg-7jts">
            <div>
              <vue-qr :text="item.techName" :size="100" :margin="0" color-dark="black" color-light="white" />
            </div>
          </td>
        </tr>
        <!-- </tbody> -->
      </table>
    </div>

  </el-drawer>
</template>

<script>
// import api from "@/api/apiServer";
// import { columns, wareDesColumns } from "./tableConfig";
// import { tableMinxins } from "@/unit/mixins/tableMinxins.js";

import { baseURL } from '@/utils/request'
import VueQr from 'vue-qr'
import { savePoster } from '@/unit/tool'
import { dibootApi } from '@/utils/request'

export default {
  // mixins: [tableMinxins],
  components: { VueQr },
  data() {
    return {
      visible: false,
      drawerWidth: 900,
      title: '打印任务单',
      model: {},
      baseURL,
      qrModel: {
        text: '',
        label: ''
      },
      list: []
    }
  },
  methods: {
    savePoster,
    savePhotoAndPrint() {
      // this.savePoster('screenViewBox', '任务单')
      this.printTask()
    },
    printTask() {
      const printDiv = document.createElement('div')// 创建一个新的div
      printDiv.innerHTML = document.getElementById('screenViewBox').outerHTML// 把要打印的内容放到一个新的div里
      printDiv.style.position = 'absolute'// div宽高设置100%；position设为fixed或者absolute占满屏幕，把当前页面内容全部覆盖住
      printDiv.style.left = '0'
      printDiv.style.top = '0'
      printDiv.style.margin = 'auto'
      printDiv.style.width = '100%'
      printDiv.style.height = 'fit-content'
      printDiv.style.zIndex = '100000'
      printDiv.style.background = '#fff'
      printDiv.style.overflow = 'auto'
      document.body.innerHTML = printDiv.outerHTML// 在body中添加创建的新结点
      setTimeout(() => {
        window.print()
        location.reload()
      }, 500)
    },
    showDrawer(record) {
      if (record.id) {
        this.getTaskDetailed(record)
        this.productTaskGetList(record)
      }
      this.visible = true
    },
    // 获取任务单明细
    async getTaskDetailed(record) {
      const { startTime, endTime, receiptNum, taskNum, planNum, quantity, productName, productNum, productSpecification, stockName, stockNum, stockSpecification } = record
      Object.assign(this.model, { startTime, endTime, receiptNum, taskNum, planNum, quantity, productName, stockName })
      this.qrModel.text = JSON.stringify({
        receiptNum,
        taskNum,
        planNum,
        quantity,
        productName,
        productNum,
        productSpecification,
        stockName,
        stockNum,
        stockSpecification
      })
      // this.qrModel.label = taskName;
    },

    // 获取工艺明细
    async productTaskGetList(record) {
      const { taskNum } = record
      const res = await dibootApi.get(`/technique/getList`, { taskNum })
      if (res && res != null) {
        this.list = res
      }
    },

    onClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg th {
  border-color: black;
  border-style: solid;
  border-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  overflow: hidden;
  padding: 10px 5px;
  word-break: normal;
}

.tg .tg-1692 {
  height: 120px;
  border-color: inherit;
  font-size: 24px;
  text-align: left;
  vertical-align: middle
}

.tg .tg-koh6 {
  height: 120px;
  border-color: inherit;
  font-size: 24px;
  text-align: left;
  vertical-align: middle;
}

.tg .tg-7jts {
  border-color: inherit;
  font-size: 18px;
  text-align: center;
  vertical-align: middle
}

.card-header {
  margin: 20px 0;
}

button {
  margin-right: 13px;
}

.card-content {
  margin-bottom: 20px;

  .contetnBox {
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;

    .headerBox {
      padding: 0 20px;
    }
  }
}

.ant-form-item {
  margin: 10px 0;
}

.tableSpan {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
}

.footer-btn {
  width: 100%;
  text-align: center;
  margin: 37px 0;

  button {
    width: 200px;
    height: 40px;
    background: #1a5eff;
    border-radius: 2px;
  }
}

.requiredNews {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
  margin-bottom: 12px;
}

.buttonList {
  padding: 12px 12px 0px 12px;
}

#screenViewBox {
  padding: 10px;
  height: fit-content;
  overflow: hidden;
  background-color: #fff;
}

#qrCode {
  text-align: center;
}

.modal-footer {
  text-align: center;
  margin: 20px 0 0 0;

  button {
    margin: 0 20px;
  }
}

.labelBox {
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
}
</style>
